<template>
    <div class="container">
        <h1>按键修饰符</h1>
        <div class="container_1">
            <label>回车键</label>
            <input @keyup.enter="keyEnter" />
        </div>
        <div class="container_1">
            <label>Tab键</label>
            <input @keyup.tab="keytab" />
        </div>
        <div class="container_1">
            <label>Delete键</label>
            <input @keyup.delete="keyDelete" />
        </div>
        <div class="container_1">
            <label>空格键</label>
            <input @keyup.space="keySpace" />
        </div>
        <div class="container_1">
            <label>上键</label>
            <input @keyup.up="keyUp" />
        </div>
        <div class="container_1">
            <button @click.left="handleLeftClick">左键点击</button>
            <button @click.right.prevent="handleRightClick">右键点击</button>
            <button @click.middle="handleMiddleClick">中键点击</button>
        </div>
    </div>
    <!-- 按键别名​
    Vue 为一些常用的按键提供了别名：

    .enter
    .tab
    .delete (捕获“Delete”和“Backspace”两个按键)
    .esc
    .space
    .up
    .down
    .left
    .right -->
</template>

<script setup>
const keyEnter = () => {
    alert("回车按下")
}
const keytab = () => {
    alert("Tab键按下")
}
const keyDelete = () => {
    alert('delete键按下')
}
const keySpace = () => {
    alert('空格键按下')
}
const keyUp = () => {
    alert('上键按下')
}

const handleLeftClick = () => {
    alert('左键点击')
}
const handleRightClick = () => {
    alert('右键点击')
}
const handleMiddleClick = (event) => {
    alert('中键点击')
}
</script>

<style scoped>
.container {
    text-align: center;
    margin-top: 50px;
    background-color: rgb(236, 236, 236);
    border-radius: 15px;
    padding: 10px;
    margin: 20px;
}

.container_1 {
    background-color: rgb(215, 215, 215);
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
}
</style>